<template>
  <div class="change-avatar">
    <!-- <CropperAvatar
      ref="cropperRef"
      :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
      :showBtn="false"
      :value="img"
      width="120px"
      @change="handelUpload"
    /> -->
    <UploadAvatar v-model="avatarImg" @success="handelUpload" :showDelete="false" :fileSize="1" />
  </div>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { uploadAvatar } from '@/api/system/user/profile'
import { CropperAvatar } from '@/components/Cropper'
import { useUserStore } from '@/store/modules/user'

defineOptions({ name: 'UserAvatar' })

const props = defineProps({
  img: propTypes.string.def(''),
  userInfo: propTypes.object.def({})
})

const avatarImg = ref()
const userData = ref()
onMounted(() => {
  console.log('props.img', props.img)

  avatarImg.value = props.img
  userData.value = props.userInfo
  console.log(userData.value, props.userInfo)
})

watch(
  () => props.img,
  () => (avatarImg.value = props.img)
)
watch(
  () => props.userInfo,
  () => (userData.value = props.userInfo)
)

const userStore = useUserStore()

const cropperRef = ref()
const message = useMessage()
const { t } = useI18n()
const handelUpload = async (data) => {
  userData.value.avatar = data
  userStore.setUserAvatarAction(data)
}
</script>

<style lang="scss" scoped>
.change-avatar {
  display: flex;
  justify-content: center;
  // img {
  //   display: block;
  //   margin-bottom: 15px;
  //   border-radius: 50%;
  // }
}
.upload-box {
  :deep(.upload) {
    .el-upload {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 1px solid #e7eaec !important;
    }
  }
}
</style>
